﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
	<style>
		html,
		body {
		  height: 100%;
		  /* The html and body elements cannot have any padding or margin. */
		}

		/* Wrapper for page content to push down footer */
		#wrap {
		  min-height: 100%;
		  height: auto;
		  /* Negative indent footer by its height */
		  margin: 0 auto -60px;
		  /* Pad bottom by footer height */
		  padding: 0 0 60px;
		}

		/* Set the fixed height of the footer here */
		#footer {
		  height: 60px;
		  background-color: #f5f5f5;
		}


		/* Custom page CSS
		-------------------------------------------------- */
		/* Not required for template or sticky footer method. */

		#wrap > .container {
		  padding: 60px 15px 0;
		}
		.container .text-muted {
		  margin: 20px 0;
		}

		#footer > .container {
		  padding-left: 15px;
		  padding-right: 15px;
		}
		#navBar
		{
			background: transparent !important;
			border: none;
			box-shadow: none;
			-webkit-box-shadow: none;
		}
		.navbar
		{
			min-height: 20px !important;
		}
		code {
		  font-size: 80%;
		}
	</style>
    <title id="Description">Sticky Footer Navbar Template for Bootstrap and jQWidgets</title>

    <!-- Bootstrap core CSS -->
    <link href="../../styles/bootstrap.min.css" rel="stylesheet">
    <!-- jQWidgets CSS -->
    <link href="../../jqwidgets/styles/jqx.base.css" rel="stylesheet">
    <link href="../../jqwidgets/styles/jqx.bootstrap.css" rel="stylesheet">
  </head>

  <body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Fixed navbar -->
      <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
          <div style="visibility: hidden;" id="navBar" >
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
              <li>
                <a href="#">Dropdown</a>
                <ul style="width: 250px;">
                  <li><a href="#">Action</a></li>
                  <li><a href="#">Another action</a></li>
                  <li><a href="#">Something else here</a></li>
                  <li type="separator"></li>
                  <li>Nav header</li>
                  <li><a href="#">Separated link</a></li>
                  <li><a href="#">One more separated link</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer with fixed navbar</h1>
        </div>
        <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
      </div>
    </div>

    <div id="footer">
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </div>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script src="../../scripts/bootstrap.min.js"></script>
    <!-- jQWidgets JavaScript files -->
    <script src="../../jqwidgets/jqxcore.js"></script>
    <script src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#navBar").jqxMenu({ autoSizeMainItems: true, theme: "bootstrap", showTopLevelArrows: true, width: '100%' });
            $("#navBar").css("visibility", "visible");
        });
	</script>
  </body>
</html>
